<template>
  <div style="height:100%;border: solid #d7d7d7 2px;border-radius: 5px;margin: 50px auto;max-width:800px;">
    <el-descriptions
        title="个人信息"
        :column="2"
        border
        style="margin-left: 10px;margin-top:20px"
    >
      <el-descriptions-item label="用户ID">{{data.ID}}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{data.Phone}}</el-descriptions-item>
      <el-descriptions-item label="类型">{{data.Type}}</el-descriptions-item>
    </el-descriptions>
  </div>
  <el-button type="warning" @click="Logout" style="margin-left: 60%">退出登录</el-button>
</template>

<script>
import {onMounted, ref} from "vue";
import router from "@/router";
import API from "@/plugins/axiosInstanse";
import {ElMessage} from "element-plus";

export default {
  name: "User",
  setup(){
    const data=ref({
      ID:"",
      Phone:"",
      Type:""
    })
    onMounted(()=>{
      if(sessionStorage.getItem('ID')==null){
        router.push('/login')
      }else{
        API.get('api/userInfo',{
          params:{
            ID:sessionStorage.getItem('ID')
          }
        }).then((response)=>{
          console.log(response)
          if(!response.Rsp.Status){
            ElMessage({
              message: response.Rsp.Msg,
              type: 'warning',
            })
            router.push('/login')
            return
          }
              data.value.ID = response.User.ID
              data.value.Type = response.User.Type
              data.value.Phone = response.User.Phone
              if(data.value.Type === 0){
                data.value.Type = "用户"
              }else if(data.value.Type === 1){
                data.value.Type = "管理员"
              }
            })
      }
    })
    const Logout=() =>{
      sessionStorage.removeItem('ID')
      router.push('/login')
    }
    return{
      data,
      Logout
    }
  }
}
</script>

<style scoped>

</style>